<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>后台管理-登录-上课代码</title>
  <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="./assets/nprogress/nprogress.css">
  <link rel="stylesheet" href="./assets/bootstrap-validator/css/bootstrapValidator.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/cateSecond.css">
</head>

<body class="lt_body">
  <aside class="lt_aside">
    <!-- logo -->
    <a href="#" class="lt_logo">ITCAST</a>
    <!-- 菜单 -->
    <div class="lt_menu">
      <!-- 用户头像 -->
      <a class="lt_user" href="javascript:;">
        <img src="./images/default.png" alt=""> 超级管理员
      </a>
      <!-- 列表菜单 -->
      <ul class="item_list">
        <li class="userManager">
          <a href="javascript:;">
            <span class="glyphicon glyphicon-user"></span> 用户管理</a>
        </li>
        <li class="categoryManager active">
          <a href="javascript:;">
            <span class="glyphicon glyphicon-th-list"></span> 分类管理</a>
          <div class="sub_item">
            <a href="cateFirst.html">一级分类</a>
            <a href="cateSecond.html">二级分类</a>
          </div>
        </li>
        <li class="goodsManager">
          <a href="javascript:;">
            <span class="glyphicon glyphicon-tags"></span> 商品管理</a>
        </li>
      </ul>
    </div>
  </aside>
  <div class="lt_container">
    <div class="lt_header_tool">
      <a class=" toggle_asideBtn pull-left " href="javascript:;">
        <span class="glyphicon glyphicon-align-justify"></span>
      </a>
      <a data-toggle="modal" data-target="#logoutModal" class=" log_out_Btn pull-right " href="javascript:;">
        <span class="glyphicon glyphicon-log-out"></span>
      </a>
    </div>
    <!-- 页面主题 -->
    <div class="lt_main">
      <!-- 路径导航 -->
      <div class="lt_location">
        <ol class="breadcrumb">
          <li>
            <a href="#">管理系统</a>
          </li>
          <li>
            <a href="#">分类管理</a>
          </li>
          <li class="active">
            <a href="#">二级分类</a>
          </li>
        </ol>
      </div>
      <!-- 主要内容 -->
      <div class="lt_content clearfix">
        <!-- 工具栏 -->
        <div class="lt_tool">
          <button class="btn btn-default addCategoryBtn " data-toggle="modal" data-target="#cateSecondtModal">添加分类</button>
        </div>
        <!-- 表格 -->
        <div class="lt_data_table">
          <table class=" lt_data_tbl table table-bordered">
            <!-- <tr><th>序号</th><th>一级分类名称</th><th>二级分类名称</th><th>二级分类LOGO</th></tr> -->
            <!-- <tr><td>1</td><td>1级</td><td>二级</td><td><img src="./" alt=""></td></tr> -->
          </table>
        </div>
        <!-- 分页 -->
        <nav aria-label="Page navigation">
          <ul class="pagination"></ul>
        </nav>
      </div>
    </div>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="logoutModalLabel">温馨提示</h4>
        </div>
        <div class="modal-body text-danger">
          <span class="glyphicon glyphicon-info-sign"></span> 您确定要退出后台管理系统吗?
        </div>
        <div class="modal-footer">
          <button type="button" class="cancel_logout_btn  btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="ok_logout_btn  btn btn-primary">确定</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 添加二级分类 -->
  <div class="modal fade" id="cateSecondtModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="cateFirstModalLabel">添加一级分类</h4>
        </div>
        <div class="modal-body ">
          <!-- ==== -->
          <form id="ff" class="form-horizontal">
            <div class="form-group">
              <label for="categoryId" class="col-sm-4 control-label">一级分类</label>
              <div class="col-sm-8">
                <select id="categoryId" name="categoryId" class="form-control">
                  <!-- <option value=""></option> -->
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-12">
                <input type="text" class="form-control" id="brandName" name="brandName" placeholder="请输入">
              </div>
            </div>
            <div class="form-group fileupload_div">
              <div class="col-sm-12">
                <input type="hidden" value="" id="brandLogo" name="brandLogo">
                <button type="button" class="btn btn-default">上传图片</button>
                <div class="fileupload">
                  <input class="fileuploadBtn" type="file" name="pic1" data-url="/category/addSecondCategoryPic">
                </div>
              </div>
            </div>

            <div class="form-group">
              <div class=" col-sm-12">
                <img class="ff_img" src="./images/none.png" alt="">
              </div>
            </div>
          </form>
          <!-- ==== -->
        </div>
        <div class="modal-footer">
          <button form="ff" type="button" class="cancelBtn  btn btn-default" data-dismiss="modal">取消</button>
          <button form="ff" type="submit" class="addBtn  btn btn-primary">确定</button>
        </div>
      </div>
    </div>
  </div>
</body>

<script src="./assets/jquery/jquery.js"></script>
<script src="./assets/bootstrap/js/bootstrap.js"></script>
<script src="./assets/bootstrap-paginator/bootstrap-paginator.js"></script>
<script src="./assets/bootstrap-validator/js/bootstrapValidator.js"></script>
<script src="./assets/nprogress/nprogress.js"></script>
<script src="./assets/echarts/echarts.min.js"></script>
<script src="./assets/jquery-fileupload/jquery.ui.widget.js"></script>
<script src="./assets/jquery-fileupload/jquery.fileupload.js"></script>
<script src="./js/common.js"></script>
<script src="./js/cateSecond.js"></script>

</html>

<!-- 
  添加分页功能
  1 引入js文件(可能有css文件)
  2 写一段分页的html代码
  3 写入一段js做初始化

  form表单
  form上面加一个id
  按钮上加一个属性 form=id
  就可以让在form外面的按钮和form产生联系
  
 -->